<template>
  <div id="personal">
    <div class="self-info center">
      <!-- sidebar -->
      <div class="lfnav fl">
        <div class="nav_title">个人中心</div>
        <div class="title_list">
          <ul>
            <li> <router-link to="/mall/personal" class="active">个人信息</router-link></li>

            <li><router-link to="/mall/myorder">我的订单</router-link></li>

            <li> <router-link to="/body" @click="logout">退出登录</router-link></li>
          </ul>
        </div>
      </div>

      <div class="intro fr" style="height: 500px;">
        <div class="grzlbt ml40">我的资料 <a @click="dialogFormVisible = true"
            style="color:#1baeae;margin-left: 600px;">更改个人信息</a>
        </div>
        <div class="info_item ml40"><span style="width: 90px;">昵称</span><span>{{ user.userInfo.nickName
        }}</span>
        </div>
        <div class="info_item ml40"><span style="width: 90px;">手机号</span><span>{{ user.userInfo.account }}</span>
        </div>
        <div class="info_item ml40"><span style="width: 90px;">密码</span><span>******</span>
        </div>
        <div class="info_item ml40"><span style="width: 90px;">个性签名</span><span>{{ user.userInfo.introduceSign }}</span>
        </div>
        <div class="info_item ml40"><span style="width: 90px;">收货信息</span><span>{{ user.userInfo.address }}</span>
        </div>

        <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#82202b"
          title="确认注销账号?" @confirm="ByeBye" @cancel="cancelEvent">
          <template #reference>
            <el-button style="left: 850px;">注销</el-button>
          </template>
        </el-popconfirm>
      </div>

      <div class="clear"></div>
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible" title="个人信息修改">
    <el-form :model="form">
      <el-form-item label="昵称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="个性签名" :label-width="formLabelWidth">
        <el-input v-model="form.introduceSign" autocomplete="off" />
      </el-form-item>
      <el-form-item label="收货信息" :label-width="formLabelWidth">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="edit">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import '../../assets/mall/styles/personal.css'
import '../../assets/mall/styles/addresses.css'
import '../../assets/mall/styles/my-orders.css'
import '../../assets/mall/styles/order-detail.css'
import '../../assets/mall/css/common.css'
import Store from '../../stores/Store.js'
import axios from 'axios'
export default {
  data() {
    return {
      info: "123",
      dialogFormVisible: false,
      formLabelWidth: '140px',
      user: Store(),
      form: {
        name: '',
        introduceSign: '',
        address: ''

      }
    }
  },
  created() {
    this.form.name = this.user.userInfo.nickName
    this.form.introduceSign = this.user.userInfo.introduceSign
    this.form.address = this.user.userInfo.address
  },
  methods: {
    logout() {
      this.user.token = 0
      this.user.cartNumber = 0
      /* 导航守卫 退出设置为false */
      sessionStorage.setItem("isLogin", false);
      this.$router.push('/login')
    },
    ByeBye() {
      axios.post('http://localhost:8080/user/logout/' + this.user.userInfo.userId).then(resp => {
        this.user.token = 0
        this.user.cartNumber = 0
        /* 导航守卫 退出设置为false */
        sessionStorage.setItem("isLogin", false);
        this.$router.push('/body')
      })
    },
    edit() {
      this.dialogFormVisible = false
      axios.post("http://localhost:8080/user/editInfo", {
        "userId": this.user.userInfo.userId,
        "nickName": this.form.name,
        "introduceSign": this.form.introduceSign,
        "address": this.form.address
      }).then(resp => {
        if (resp.data != "") {
          this.user.userInfo = resp.data
        } else {
          alert("修改失败")
        }
      })
    }
  }
}
</script>

<style scoped></style>